<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Calculator</title>
    <link rel="stylesheet" href="css/Calculator.css">
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
        <div class="calculator">
            <div class="result" style="grid-area: result;">
                {{equation}}
            </div>

            <button style="grid-area: AC;" @click="clear">AC</button>
            <button style="grid-area: plus-minus;" @click="calculateToggle">±</button>
            <button style="grid-area: percent;" @click="calculatePercentage">%</button>
            <button style="grid-area: add;" @click="append('+')">+</button>
            <button style="grid-area: subtract;" @click="append('-')">-</button>
            <button style="grid-area: multiply;" @click="append('×')">×</button>
            <button style="grid-area: divide;" @click="append('÷')">÷</button>
            <button style="grid-area: equal;" @click="calculate">=</button>

            <button style="grid-area: number-1;" @click="append('1')">1</button>
            <button style="grid-area: number-2;" @click="append('2')">2</button>
            <button style="grid-area: number-3;" @click="append('3')">3</button>
            <button style="grid-area: number-4;" @click="append('4')">4</button>
            <button style="grid-area: number-5;" @click="append('5')">5</button>
            <button style="grid-area: number-6;" @click="append('6')">6</button>
            <button style="grid-area: number-7;" @click="append('7')">7</button>
            <button style="grid-area: number-8;" @click="append('8')">8</button>
            <button style="grid-area: number-9;" @click="append('9')">9</button>
            <button style="grid-area: number-0;" @click="append('0')">0</button>

            <button style="grid-area: dot;" @click="append('.')">.</button>
        </div>
    </div>
    <script src="js/Calculator.js"></script>
  </body>
</html>
